import React, { useState } from 'react';
import { 
  LayoutDashboard, Database, Calculator, Target, 
  BarChart3, FileText, Settings, Bell, User, Search, Menu, X,
  Leaf, Factory, Truck, Globe
} from 'lucide-react';

// 导入子组件
import CarbonDashboard from './components/CarbonDashboard.jsx';
import DataCollection from './components/DataCollection.jsx';
import CarbonCalculation from './components/CarbonCalculation.jsx';
import TargetManagement from './components/TargetManagement.jsx';
import SupplyChainManagement from './components/SupplyChainManagement.jsx';
import CarbonReporting from './components/CarbonReporting.jsx';
import CarbonSettings from './components/CarbonSettings.jsx';

const CarbonFootprintPrototype = ({ onNavigate }) => {
  const [currentPage, setCurrentPage] = useState('dashboard');
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [userMenuOpen, setUserMenuOpen] = useState(false);

  // 菜单配置
  const menuItems = [
    {
      id: 'dashboard',
      name: '碳足迹仪表盘',
      icon: LayoutDashboard,
      description: '碳排放概览和关键指标监控'
    },
    {
      id: 'data-collection',
      name: '数据收集',
      icon: Database,
      description: '碳排放数据录入和管理'
    },
    {
      id: 'calculation',
      name: '碳足迹计算',
      icon: Calculator,
      description: '碳排放计算和分析'
    },
    {
      id: 'targets',
      name: '减排目标',
      icon: Target,
      description: '减排目标设定和跟踪'
    },
    {
      id: 'supply-chain',
      name: '供应链管理',
      icon: Truck,
      description: '供应链碳足迹管理'
    },
    {
      id: 'reporting',
      name: '报告披露',
      icon: FileText,
      description: '碳排放报告生成和披露'
    },
    {
      id: 'settings',
      name: '系统设置',
      icon: Settings,
      description: '系统配置和参数设置'
    }
  ];

  // 模拟用户信息
  const currentUser = {
    name: '李环保',
    role: '碳管理专员',
    avatar: null,
    notifications: 3
  };

  // 渲染当前页面组件
  const renderCurrentPage = () => {
    switch (currentPage) {
      case 'dashboard':
        return <CarbonDashboard />;
      case 'data-collection':
        return <DataCollection />;
      case 'calculation':
        return <CarbonCalculation />;
      case 'targets':
        return <TargetManagement />;
      case 'supply-chain':
        return <SupplyChainManagement />;
      case 'reporting':
        return <CarbonReporting />;
      case 'settings':
        return <CarbonSettings />;
      default:
        return <CarbonDashboard />;
    }
  };

  return (
    <div className="min-h-screen flex">
      {/* 侧边栏 */}
      <div className={`${sidebarOpen ? 'w-64' : 'w-16'} bg-white shadow-lg transition-all duration-300 flex flex-col hidden md:flex`}>
        {/* Logo区域 */}
        <div className="h-16 flex items-center justify-between px-4 border-b border-gray-200">
          {sidebarOpen && (
            <div className="flex items-center space-x-2">
              <Leaf className="h-8 w-8 text-green-600" />
              <span className="text-xl font-bold text-gray-900">碳足迹管理</span>
            </div>
          )}
          <button
            onClick={() => setSidebarOpen(!sidebarOpen)}
            className="p-2 rounded-lg hover:bg-gray-100"
          >
            {sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
          </button>
        </div>

        {/* 导航菜单 */}
        <nav className="flex-1 px-4 py-6 space-y-2">
          {menuItems.map((item) => {
            const Icon = item.icon;
            const isActive = currentPage === item.id;
            
            return (
              <button
                key={item.id}
                onClick={() => setCurrentPage(item.id)}
                className={`w-full flex items-center px-3 py-3 text-left rounded-lg transition-all duration-200 ${
                  isActive
                    ? 'bg-green-100 text-green-600 border border-green-200'
                    : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
                }`}
                title={!sidebarOpen ? item.name : ''}
              >
                <Icon className="h-5 w-5 mr-3" />
                {sidebarOpen && (
                  <div>
                    <div className="font-medium">{item.name}</div>
                    <div className="text-xs text-gray-500 mt-1">{item.description}</div>
                  </div>
                )}
              </button>
            );
          })}
        </nav>

        {/* 用户信息 */}
        {sidebarOpen && (
          <div className="p-4 border-t border-gray-200">
            <div className="flex items-center space-x-3">
              <div className="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center">
                <User className="h-6 w-6 text-white" />
              </div>
              <div className="flex-1">
                <div className="font-medium text-gray-900">{currentUser.name}</div>
                <div className="text-sm text-gray-500">{currentUser.role}</div>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 flex flex-col min-h-screen bg-gray-50">
        {/* 顶部导航栏 */}
        <header className="bg-white shadow-sm border-b border-gray-200 h-16 flex items-center justify-between px-6">
          <div className="flex items-center space-x-4">
            <button
              onClick={() => setSidebarOpen(true)}
              className="md:hidden p-2 rounded-lg hover:bg-gray-100"
            >
              <Menu className="h-5 w-5" />
            </button>
            
            <div className="flex items-center space-x-2">
              <h1 className="text-xl font-semibold text-gray-900">
                {menuItems.find(item => item.id === currentPage)?.name || '碳足迹管理'}
              </h1>
            </div>
          </div>

          <div className="flex items-center space-x-4">
            {/* 搜索框 */}
            <div className="relative hidden sm:block">
              <Search className="h-5 w-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
              <input
                type="text"
                placeholder="搜索..."
                className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
              />
            </div>

            {/* 通知 */}
            <div className="relative">
              <button className="p-2 rounded-lg hover:bg-gray-100 relative">
                <Bell className="h-5 w-5 text-gray-600" />
                {currentUser.notifications > 0 && (
                  <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                    {currentUser.notifications}
                  </span>
                )}
              </button>
            </div>

            {/* 用户菜单 */}
            <div className="relative">
              <button
                onClick={() => setUserMenuOpen(!userMenuOpen)}
                className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100"
              >
                <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                  <User className="h-5 w-5 text-white" />
                </div>
                <span className="hidden sm:block font-medium text-gray-900">{currentUser.name}</span>
              </button>

              {userMenuOpen && (
                <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
                  <div className="p-3 border-b border-gray-200">
                    <div className="font-medium text-gray-900">{currentUser.name}</div>
                    <div className="text-sm text-gray-500">{currentUser.role}</div>
                  </div>
                  <div className="p-2">
                    <button className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">
                      个人设置
                    </button>
                    <button className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">
                      退出登录
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>
        </header>

        {/* 页面内容 */}
        <main className="flex-1 overflow-auto">
          {renderCurrentPage()}
        </main>
      </div>

      {/* 移动端侧边栏覆盖层 */}
      <div className={`fixed inset-0 bg-black bg-opacity-50 z-50 md:hidden transition-opacity ${sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
        <div className={`w-64 bg-white h-full shadow-lg transform transition-transform ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}>
          {/* 移动端侧边栏内容 */}
          <div className="h-16 flex items-center justify-between px-4 border-b border-gray-200">
            <div className="flex items-center space-x-2">
              <Leaf className="h-8 w-8 text-green-600" />
              <span className="text-xl font-bold text-gray-900">碳足迹管理</span>
            </div>
            <button
              onClick={() => setSidebarOpen(false)}
              className="p-2 rounded-lg hover:bg-gray-100"
            >
              <X className="h-5 w-5" />
            </button>
          </div>
          
          <nav className="px-4 py-6 space-y-2">
            {menuItems.map((item) => {
              const Icon = item.icon;
              const isActive = currentPage === item.id;
              
              return (
                <button
                  key={item.id}
                  onClick={() => {
                    setCurrentPage(item.id);
                    setSidebarOpen(false);
                  }}
                  className={`w-full flex items-center px-3 py-3 text-left rounded-lg transition-all duration-200 ${
                    isActive
                      ? 'bg-green-100 text-green-600 border border-green-200'
                      : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
                  }`}
                >
                  <Icon className="h-5 w-5 mr-3" />
                  <div>
                    <div className="font-medium">{item.name}</div>
                    <div className="text-xs text-gray-500 mt-1">{item.description}</div>
                  </div>
                </button>
              );
            })}
          </nav>

          <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200">
            <div className="flex items-center space-x-3">
              <div className="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center">
                <User className="h-6 w-6 text-white" />
              </div>
              <div className="flex-1">
                <div className="font-medium text-gray-900">{currentUser.name}</div>
                <div className="text-sm text-gray-500">{currentUser.role}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CarbonFootprintPrototype; 